<template>
	<view>
		<u-swipe-action :show="item.show" :index="index"
			v-for="(item, index) in list" :key="item.id" 
			@click="click" @open="open"
			:options="options"
		>
			<view class="item u-flex u-flex-1" 
				@click="jumpS(item)">
				<view>
					<image mode="aspectFill" :src="item.user_info.avatar" />
				</view>
				<view class="info-wrap u-flex-1">
					<view class="top-title u-flex">
						<view class="title u-flex-1 u-flex">
							<view class="name">{{item.user_info.nickname}}</view>
							<view class="type">房联</view>
							<view class="score">{{Number(item.score || 0)}}</view>
						</view>
						<view class="date">{{$u.date(item.create_time,'yyyy-mm-dd')}}</view>
					</view>
					<view class="label u-flex">
						<view v-for="(i,iindex) in item.user_info.admin_tag_ids" :key="iindex">{{i}}</view>
					</view>
					
					<view class="message u-line-1"><text v-if="item.is_read === 0"></text>{{item.content}}</view>
				</view>
			</view>
		</u-swipe-action>
	</view>
</template>

<script>
	import socket from '@/common/socket'
	export default {
		data() {
			return {
				list: [],
				options: [
					// {
					// 	text: '收藏',
					// 	style: {
					// 		backgroundColor: '#007aff'
					// 	}
					// },
					// {
					// 	text: '删除',
					// 	style: {
					// 		backgroundColor: '#de1f1c'
					// 	}
					// }
				]
			}
		},
		methods: {
			click(index, index1) {
				if(index1 == 0) {
					this.list.splice(index, 1);
					this.$u.toast(`删除了第${index}个聊天`);
				} else {
					this.list[index].show = false;
					this.$u.toast(`收藏成功`);
				}
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				// let item = this.list[index]
				// 		item.show = !0
				// this.$set(this.list,index,item)
				
				// this.list.map((val, idx) => {
				// 	if(index != idx) this.list[idx].show = false;
				// })
				
				this.list[index].show = true;
				this.list.map((val, idx) => {
					if (index != idx) this.list[idx].show = false;
				});
			},
			getList(){
				this.$u.post('/api/chat/logList').then(res=>{
					res.forEach(item=>{
						item.show = !1
						item.score = item.user_info.score || 0
					})
					this.list = res
				})
			},
			jumpS(item){
				// this.$store.commit('add_message_list',{
				// 	id:item.user_info.id,
				// 	hide:!0//隐藏此对话小红点
				// })
				this.jump(`/pages/chat/detail?id=${item.user_info.id}&name=${item.user_info.nickname}&avatar=${item.user_info.avatar}`)
			}
		},
		onShow() {
			socket.acceptMessage = (res)=>{
				if(res.type == "message"){
					this.$u.debounce(()=>{
						this.getList()
					},1000)
				}
			}
			this.getList()
		},
		onHide() {
			socket.acceptMessage = null
		},
		destroyed() {
			socket.acceptMessage = null
		}
	};
</script>

<style lang="scss" scoped>
	.item {
		display: flex;
	}
	
	image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		margin: 0 30rpx 0;
		border-radius: 50%;
	}
	
	.info-wrap{
		width: 0;padding: 20rpx 0;
		border-bottom: 1rpx solid #ddd;
		.top-title{
			.title{
				overflow: hidden;
				view{margin: 0 6rpx;}
				.name{font-size: 32rpx;font-weight: bold;margin-left: 0;}
				.type{background-color: #4edcc5;color: #fff;font-size: 24rpx;padding: 2rpx 10rpx;border-radius: 6rpx;white-space: nowrap;}
				.score{color: #f00;font-size: 32rpx;margin-right: 0;white-space: nowrap;}
			}
			.date{margin-right: 20rpx;font-size: 24rpx;}
		}
		.label{
			padding: 10rpx 0;flex-wrap: wrap;
			view{border: 1rpx solid #ccc;font-size: 24rpx;border-radius: 8rpx;padding: 4rpx 10rpx;margin-right: 14rpx;margin-top: 4rpx;
				&:last-child{margin-right: 0;}
			}
		}
		.message{width: 100%;
			text{display: inline-block;width: 10rpx;height: 10rpx;border-radius: 50%;background-color: #f00;margin: 0 16rpx 6rpx 0;}
		}
	}
</style>
